<template>
  <div class="First">
      <div class="common-layout">
        <el-container>
          <!-- 头 -->
          <el-header>
            <img src="@/assets/uc.png" id="h1" />
            
              <el-container :default-active="$route.path" router >

                
              <el-header style="text-align: right; font-size: 20px;width: 300px;position: absolute;float: right; right:0px;">
              <div class="asetting">
                <AdminSetting/>
                <el-button type="primary">
                    <el-icon class="el-icon--right"><Upload /></el-icon>
                </el-button>

                <el-button type="primary" :icon="CloseBold" @click="QuitLogin"/>
               
                 
            </div>
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
                      
                <div class="toolbar" >
                </div>
              </el-header>
            </el-container>
            


          </el-header>

          <!-- 体 -->
          <el-container>
            <!-- 左侧菜单行 -->
            <el-aside width="200px">
              <el-menu :default-active="$route.path" router>
                <!-- =============================1============= -->
                <el-sub-menu index="1">
                  <template #title>
                    <el-icon>
                      <message /> </el-icon
                    >用户管理
                  </template>

                  <el-menu-item-group>
                    <!-- <template #title>
                      <el-icon>
                        <MoreFilled />
                      </el-icon>
                    </template> -->
                    <el-menu-item index="1-1">
                      <el-icon>
                        <UserFilled />
                      </el-icon>
                      用户信息
                    </el-menu-item>
                    <el-menu-item index="1-2">
                      <el-icon>
                        <InfoFilled /> 
                      </el-icon>
                        用户个人信息
                    </el-menu-item>
                    <el-menu-item index="1-3">
                      <el-icon>
                        <Histogram /> </el-icon
                      >用户数据报表
                    </el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
                <!-- =================================================2========== -->
                <el-sub-menu index="2">
                  <template #title>
                    <el-icon>
                      <!-- <icon-menu /> -->
                      <Grid /> </el-icon
                    >应用管理
                  </template>

                  <el-menu-item-group>
                    <!-- <template #title>
                      <el-icon>
                        <DocumentCopy />
                      </el-icon>
                    </template> -->
                    <el-menu-item index="2-1">
                      <el-icon>
                        <TrendCharts /> </el-icon
                      >应用数据
                    </el-menu-item>
                    <el-menu-item index="2-2">
                      <el-icon>
                        <HelpFilled /> </el-icon
                      >管理应用
                    </el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
                <!-- =========================================3===== -->
                <el-sub-menu index="3">
                  <template #title>
                    <el-icon>
                      <setting /> </el-icon
                    >配置管理
                  </template>

                  <el-menu-item-group>
                    <!-- <template #title>
                      <el-icon>
                        <Avatar />
                      </el-icon>
                    </template> -->
                    <el-menu-item index="3-1">
                      <el-icon>
                        <List /> </el-icon
                      >服务配置
                    </el-menu-item>
                    <el-menu-item index="3-2">
                      <el-icon>
                        <Odometer /> </el-icon
                      >访问控制
                    </el-menu-item>
                    <el-menu-item index="3-3">
                      <el-icon>
                        <Bell /> </el-icon
                      >服务定制
                    </el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
              </el-menu>
            </el-aside>

            <!-- 中间体 -->
            <el-main> 
                 <!-- 导航标签 -->
                  <el-tabs
                    v-model="editableTabsValue"
                    type="card"
                    editable
                    class="demo-tabs"
                    @edit="handleTabsEdit"
                  >
                    <el-tab-pane
                      v-for="item in editableTabs"
                      :key="item.name"
                      :label="item.title"
                      :name="item.name"
                    >
                      {{ item.content }}
                    </el-tab-pane>
                  </el-tabs>
                  <!-- ==========中间体============ -->
               
            </el-main>

          </el-container>
        </el-container>
      </div>
  </div>

 <RouterView/>
  
</template>

<script lang="ts" setup>
import {useRoute,useRouter} from 'vue-router'
import {ref,onMounted,inject} from 'vue'
import {ElMessage, ElMessageBox } from "element-plus";
import AdminSetting from '../components/UCenter/mainbody/admin/AdminSetting.vue';
import {
  CloseBold
} from "@element-plus/icons-vue"

//通过注入的方法来获取axios实例
const $http:any=inject('$http') 
//定义路由器
const $router=useRouter()

 const QuitLogin = () => {
   ElMessageBox.confirm(
    '你确定退出吗？',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
       $router.push('/admin')
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消退出',
      })
    })
   
 }

let tabIndex = 1
const editableTabsValue = ref('')
const editableTabs = ref([
  {
    title: ' Welcome',
    name: '1',
    content: 'UCenter欢迎您！',
  },
])

const handleTabsEdit = (targetName: string, action: 'remove' | 'add') => {
  if (action === 'add') {
    const newTabName = `${++tabIndex}`
    editableTabs.value.push({
      title: 'New Tab',
      name: newTabName,
      content: 'New Tab content',
    })
    editableTabsValue.value = newTabName
  } else if (action === 'remove') {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }

    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  }
}

</script>

<style scoped>
.First{
  position: absolute;
}
/* 整体 */
:deep(.el-container) {
  max-width: 1425px;
  width: 1425px;
}
/* 头 */
:deep(.el-header) {
  --el-header-padding: 0 15px;
  border: 1px solid rgb(92, 119, 116);
  background-color: rgb(244, 243, 245);
  width: 100%;
  padding: 0;
}
:deep(.el-aside) {
  height: 700px;
  border: 1px solid rgb(48, 93, 93);
  background-color: rgb(247, 244, 248);
}
/* 体 */
:deep(.el-main) {
  --el-main-padding: 10px;
  border: 1px solid salmon;
}
:deep(.el-avatar){
  --el-avatar-size: 55px;
  position: absolute;
  right: 15px;
}
/* 左侧菜单 */
:deep(.el-menu){
  border: 1px solid rgb(136, 86, 81);
  background-color: rgb(253, 251, 255);
}
:deep(.el-sub-menu){
  border: 1px solid saddlebrown;
}
:deep(.el-menu-item){
  border: 1px solid sienna;
  background-color: rgb(239, 236, 239);
}
/* 图片 */
img {
  position: absolute;
  left: 5px;
  text-align: center;
  width: 200px;
  height: 60px;
}
:deep(.el-tabs__nav){
  z-index: 0;
}
.asetting{
  position: absolute;
  display: flex;
  top: 15px;
  right: 210px;
  width: 55px;
  height: 55px;
}
:deep(.el-button){
  margin-right: 15px;
}
:deep(.el-button+.el-button){
  margin-left: 0px;
}
</style>